<template>
  <div id="infobox">
    <!--即时通讯聊天界面-->
    <div class="info-body">
      <!--左边界面-->
      <div class="left-info">
        <!--通讯列表-->
        <div class="left-info-list" :class="activeId==1?'activeLine':''" @click="tabId(1)">
          <!--//人员个数 》=7 3行-->
          <div class="img-box-line">
            <div class="img-box-list sevenbox">
              <img src="@/assets/imageAdmin/logo.jpg" alt="">
              <img src="@/assets/imageAdmin/logo.jpg" alt="">
              <img src="@/assets/imageAdmin/logo.jpg" alt="">
            </div>
            <div class="img-box-list sevenbox">
              <img src="@/assets/imageAdmin/logo.jpg" alt="">
              <img src="@/assets/imageAdmin/logo.jpg" alt="">
              <img src="@/assets/imageAdmin/logo.jpg" alt="">
            </div>
            <div class="img-box-list sevenbox">
              <img src="@/assets/imageAdmin/logo.jpg" alt="">
              <img src="@/assets/imageAdmin/logo.jpg" alt="">
              <img src="@/assets/imageAdmin/logo.jpg" alt="">
            </div>
          </div>
          <div class="user-box">
            <div class="title-line">
              <span class="title-line-name">群人数大于等于7<em>班级</em></span>
            </div>
          </div>
        </div>
        <div class="left-info-list" :class="activeId==1?'activeLine':''" @click="tabId(1)">
          <!--//人员个数 》=7 3行-->
          <div class="img-box-line">
            <div class="img-box-list sevenbox">
              <img src="@/assets/imageAdmin/logo.jpg" alt="">
              <img src="@/assets/imageAdmin/logo.jpg" alt="">
            </div>
            <div class="img-box-list sevenbox">
              <img src="@/assets/imageAdmin/logo.jpg" alt="">
              <img src="@/assets/imageAdmin/logo.jpg" alt="">
              <img src="@/assets/imageAdmin/logo.jpg" alt="">
            </div>
            <div class="img-box-list sevenbox">
              <img src="@/assets/imageAdmin/logo.jpg" alt="">
              <img src="@/assets/imageAdmin/logo.jpg" alt="">
              <img src="@/assets/imageAdmin/logo.jpg" alt="">
            </div>
          </div>
          <div class="user-box">
            <div class="title-line">
              <span class="title-line-name">群人数8<em>班级</em></span>
            </div>
          </div>
        </div>
        <div class="left-info-list" :class="activeId==1?'activeLine':''" @click="tabId(1)">
          <!--//人员个数 >=5 2行-->
          <div class="img-box-line">
            <div class="img-box-list fivebox">
              <img src="@/assets/imageAdmin/logo.jpg" alt="">
              <img src="@/assets/imageAdmin/logo.jpg" alt="">
              <img src="@/assets/imageAdmin/logo.jpg" alt="">
            </div>
            <div class="img-box-list fivebox">
              <img src="@/assets/imageAdmin/logo.jpg" alt="">
              <img src="@/assets/imageAdmin/logo.jpg" alt="">
              <img src="@/assets/imageAdmin/logo.jpg" alt="">
            </div>
          </div>
          <div class="user-box">
            <div class="title-line">
              <span class="title-line-name">群人数大于等于5<em>班级</em></span>
            </div>
          </div>
        </div>
        <div class="left-info-list" :class="activeId==1?'activeLine':''" @click="tabId(1)">
          <!--//人员个数 >=5 2行-->
          <div class="img-box-line">
            <div class="img-box-list fivebox">
              <img src="@/assets/imageAdmin/logo.jpg" alt="">
              <img src="@/assets/imageAdmin/logo.jpg" alt="">
            </div>
            <div class="img-box-list fivebox">
              <img src="@/assets/imageAdmin/logo.jpg" alt="">
              <img src="@/assets/imageAdmin/logo.jpg" alt="">
              <img src="@/assets/imageAdmin/logo.jpg" alt="">
            </div>
          </div>
          <div class="user-box">
            <div class="title-line">
              <span class="title-line-name">群人数大于等于5<em>班级</em></span>
            </div>
          </div>
        </div>
        <div class="left-info-list" :class="activeId==1?'activeLine':''" @click="tabId(1)">
          <!--//人员个数 >=3 2行-->
          <div class="img-box-line">
            <div class="img-box-list fourbox">
              <img src="@/assets/imageAdmin/logo.jpg" alt="">
              <img src="@/assets/imageAdmin/logo.jpg" alt="">
            </div>
            <div class="img-box-list fourbox">
              <img src="@/assets/imageAdmin/logo.jpg" alt="">
              <img src="@/assets/imageAdmin/logo.jpg" alt="">
            </div>
          </div>
          <div class="user-box">
            <div class="title-line">
              <span class="title-line-name">群人数大于等于3<em>班级</em></span>
            </div>
          </div>
        </div>
        <div class="left-info-list" :class="activeId==1?'activeLine':''" @click="tabId(1)">
          <!--//人员个数 >=3 2行-->
          <div class="img-box-line">
            <div class="img-box-list fourbox">
              <img src="@/assets/imageAdmin/logo.jpg" alt="">
            </div>
            <div class="img-box-list fourbox">
              <img src="@/assets/imageAdmin/logo.jpg" alt="">
              <img src="@/assets/imageAdmin/logo.jpg" alt="">
            </div>
          </div>
          <div class="user-box">
            <div class="title-line">
              <span class="title-line-name">群人数大于等于3<em>班级</em></span>
            </div>
          </div>
        </div>
      </div>
      <!--右边界面-->
      <div class="right-info">
        <div class="defult-info" v-if="activeId==0">默认界面</div>
        <div class="active-info" v-else>
          <!--消息界面-->
          <div class="info-body-user">
            <!--用户信息-->
            <div class="info-body-user-list">
              <div class="info-body-user-box">
                <img src="@/assets/imageAdmin/logo.jpg" alt="">
                <div class="info-user-line">
                  <p>小郑</p>
                  <p>小郑(小一班英语老师)</p>
                </div>
              </div>
            </div>
            <!--消息信息-->
            <div class="info-body-list">
              <p class="list-time">1月18日 16:50</p>
              <!--消息来源-->
              <div class="list-info-line">
                <div class="left-user-anser">
                  <div class="info-user-img"><img src="@/assets/imageAdmin/logo.jpg" alt=""></div>
                  <div class="info-user-anser"><p>我们班级的竖版记得还我们班级的竖版记得还我们班级的竖版记得还我们班级的竖版记得还我们班级的竖版记得还我们班级的竖版记得还我们班级的竖版记得还我们班级的竖版记得还我们班级的竖版记得还我们班级的竖版记得还我们班级的竖版记得还我们班级的竖版记得还我们班级的竖版记得还我们班级的竖版记得还我们班级的竖版记得还我们班级的竖版记得还我们班级的竖版记得还我们班级的竖版记得还我们班级的竖版记得还我们班级的竖版记得还我们班级的竖版记得还</p></div>
                </div>
                <!--我的回复-->
                <div class="right-user-anser">
                  <div class="info-user-anser"><p>我们班级的竖版记得还我们班级的竖版记得还我们班级的竖版记得还我们班级的竖版记得还我们班级的竖版记得还我们班级的竖版记得还我们班级的竖版记得还我们班级的竖版记得还我们班级的竖版记得还我们班级的竖版记得还我们班级的竖版记得还我们班级的竖版记得还我们班级的竖版记得还我们班级的竖版记得还我们班级的竖版记得还我们班级的竖版记得还我们班级的竖版记得还我们班级的竖版记得还我们班级的竖版记得还我们班级的竖版记得还我们班级的竖版记得还</p></div>
                  <div class="info-user-img"><img src="@/assets/imageAdmin/logo.jpg" alt=""></div>
                </div>
              </div>
              <!--消息来源-->
              <div class="list-info-line">
                <div class="left-user-anser">
                  <div class="info-user-img"><img src="@/assets/imageAdmin/logo.jpg" alt=""></div>
                  <div class="info-user-anser"><p>我们班级的竖版记得还我们班级的竖版记得还我们班级的竖版记得还我们班级的竖版记得还我们班级的竖版记得还我们班级的竖版记得还我们班级的竖版记得还我们班级的竖版记得还我们班级的竖版记得还我们班级的竖版记得还我们班级的竖版记得还我们班级的竖版记得还我们班级的竖版记得还我们班级的竖版记得还我们班级的竖版记得还我们班级的竖版记得还我们班级的竖版记得还我们班级的竖版记得还我们班级的竖版记得还我们班级的竖版记得还我们班级的竖版记得还</p></div>
                </div>
                <!--我的回复-->
                <div class="right-user-anser">
                  <div class="info-user-anser"><p>我们班级的竖版记得还我们班级的竖版记得还我们班级的竖版记得还我们班级的竖版记得还我们班级的竖版记得还我们班级的竖版记得还我们班级的竖版记得还我们班级的竖版记得还我们班级的竖版记得还我们班级的竖版记得还我们班级的竖版记得还我们班级的竖版记得还我们班级的竖版记得还我们班级的竖版记得还我们班级的竖版记得还我们班级的竖版记得还我们班级的竖版记得还我们班级的竖版记得还我们班级的竖版记得还我们班级的竖版记得还我们班级的竖版记得还</p></div>
                  <div class="info-user-img"><img src="@/assets/imageAdmin/logo.jpg" alt=""></div>
                </div>
              </div>
              <!--消息来源-->
              <div class="list-info-line">
                <div class="left-user-anser">
                  <div class="info-user-img"><img src="@/assets/imageAdmin/logo.jpg" alt=""></div>
                  <div class="info-user-anser"><p>我们班级的竖版记得还我们班级的竖版记得还我们班级的竖版记得还我们班级的竖版记得还我们班级的竖版记得还我们班级的竖版记得还我们班级的竖版记得还我们班级的竖版记得还我们班级的竖版记得还我们班级的竖版记得还我们班级的竖版记得还我们班级的竖版记得还我们班级的竖版记得还我们班级的竖版记得还我们班级的竖版记得还我们班级的竖版记得还我们班级的竖版记得还我们班级的竖版记得还我们班级的竖版记得还我们班级的竖版记得还我们班级的竖版记得还</p></div>
                </div>
                <!--我的回复-->
                <div class="right-user-anser">
                  <div class="info-user-anser"><p>我们班级的竖版记得还我们班级的竖版记得还我们班级的竖版记得还我们班级的竖版记得还我们班级的竖版记得还我们班级的竖版记得还我们班级的竖版记得还我们班级的竖版记得还我们班级的竖版记得还我们班级的竖版记得还我们班级的竖版记得还我们班级的竖版记得还我们班级的竖版记得还我们班级的竖版记得还我们班级的竖版记得还我们班级的竖版记得还我们班级的竖版记得还我们班级的竖版记得还我们班级的竖版记得还我们班级的竖版记得还我们班级的竖版记得还</p></div>
                  <div class="info-user-img"><img src="@/assets/imageAdmin/logo.jpg" alt=""></div>
                </div>
              </div>
              <!--消息来源-->
              <div class="list-info-line">
                <div class="left-user-anser">
                  <div class="info-user-img"><img src="@/assets/imageAdmin/logo.jpg" alt=""></div>
                  <div class="info-user-anser"><p>我们班级的竖版记得还我们班级的竖版记得还我们班级的竖版记得还我们班级的竖版记得还我们班级的竖版记得还我们班级的竖版记得还我们班级的竖版记得还我们班级的竖版记得还我们班级的竖版记得还我们班级的竖版记得还我们班级的竖版记得还我们班级的竖版记得还我们班级的竖版记得还我们班级的竖版记得还我们班级的竖版记得还我们班级的竖版记得还我们班级的竖版记得还我们班级的竖版记得还我们班级的竖版记得还我们班级的竖版记得还我们班级的竖版记得还</p></div>
                </div>
                <!--我的回复-->
                <div class="right-user-anser">
                  <div class="info-user-anser"><p>我们班级的竖版记得还我们班级的竖版记得还我们班级的竖版记得还我们班级的竖版记得还我们班级的竖版记得还我们班级的竖版记得还我们班级的竖版记得还我们班级的竖版记得还我们班级的竖版记得还我们班级的竖版记得还我们班级的竖版记得还我们班级的竖版记得还我们班级的竖版记得还我们班级的竖版记得还我们班级的竖版记得还我们班级的竖版记得还我们班级的竖版记得还我们班级的竖版记得还我们班级的竖版记得还我们班级的竖版记得还我们班级的竖版记得还</p></div>
                  <div class="info-user-img"><img src="@/assets/imageAdmin/logo.jpg" alt=""></div>
                </div>
              </div>
            </div>
            <!--end-->
          </div>
          <!--输入框界面-->
          <div class="info-body-list-line">
            <!--提交框-->
            <div class="textarea-body">
              <textarea name="" id="" cols="30" rows="10"></textarea>
            </div>
            <!--按键框-->
            <div class="bottom-button">
              <el-button><i class="el-icon-edit"></i>发送</el-button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        activeId: 0
      }
    },
    methods: {
      tabId (id) {
        this.activeId = id
      }
    },
    mounted () {
    }
  }
</script>

<style lang="scss">
  //@import "../../assets/scss/info.scss";
</style>
